<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公告列表</title>
    <!--2 引入element ui css样式-->
    <!--2.1 引入element ui-->
    <link rel="stylesheet" href="../../public/element-ui/index.css">
    <style>
        .el-collapse-item__header {
            background-color: whitesmoke;
        }
    </style>
</head>
<body>
<!--3 创建div容器,挂载vue实例-->
<div id="app">
    <el-collapse>
        <div>
            <el-button type="primary" size="small" @click="onAdd()">添加</el-button>
        </div>
        <template v-for="(item,index) in tableData">
            <el-collapse-item>
                <template slot="title"><div style="margin-left: 40px;"><h2>{{item.title}}</h2></div></template>
                <template slot="name">{{item.id}}</template>
                <div style="float: left"><h3>简介：{{item.desc}}</h3></div>
                <div style="float: right ;padding: 6px 0" type="text">
                    <el-button type="primary" round size="small" @click="onEdit(index)">修改</el-button>
                    <el-button type="danger" round size="small" style="margin: 0" @click="onDelete(index)">删除</el-button>
                </div>
            </el-collapse-item>
        </template>
    </el-collapse>

    <el-dialog width="80%"
               :title="dialog.title"
               :visible.sync="dialog.show"
               :close-on-click-modal='false'
               :close-on-press-escape='false'
               :modal-append-to-body='false'
               :show-close='false'>
        <el-form ref="myform" :model="mymodel" label-width="100px">
            <el-form-item label="ID：" prop="id" hidden>
                <el-input v-model="mymodel.id"></el-input>
            </el-form-item>
            <el-form-item label="公告标题：" prop="title">
                <el-input v-model="mymodel.title"></el-input>
            </el-form-item>
            <el-form-item label="公告简介：" prop="desc">
                <el-input v-model="mymodel.desc"></el-input>
            </el-form-item>
            <el-form-item label="公告内容：" prop="content">
                <el-input type="textarea" v-model="mymodel.content" :rows="5" placeholder="请输入公告内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" round size="small" @click="onSubmitAdd()">保存</el-button>
                <el-button type="danger" round size="small" @click="dialog.show = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<!--1 从本地引入js库 锁定版本-->
<!--1.1 引入vue-->
<script src="../../public/vue/vue.min.js"></script>
<!--1.2 引入element ui-->
<script src="../../public/element-ui/index.js"></script>
<!--1.3 引入 axios-->
<script src="../../public/axios/axios.min.js"></script>
<!--1.4 引入 自定义js包-->
<script src="../../public/mx-config.js"></script>

<script>
    //4 创建vue实例
    const app = new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [],
                //控制对话框
                dialog: {
                    title: '',
                    show: false,
                    option:'',
                },
                //定义模型，与表单匹配
                mymodel: {
                    id:'',
                    title:'',
                    content:'',
                    desc:''
                },
                //设置一个变量，保存哪行数据被选中了
                selectItemIndex: -1
            }
        },
        mounted: function () {
            //初始化表格
            this.initTable();
        },
        methods: {
            //初始化表格
            initTable: function () {
                //通过axios调用服务器json服务
                axios.get("/noticeList/").then(res => {
                    this.tableData = res.data;
                });
            },

            //响应添加按钮
            onAdd: function () {
                //清空表单
                this.mymodel = {
                    id:'',
                    title:'',
                    content:'',
                    desc:''
                };

                //alert("注册用户");
                this.dialog.title = "添加通告";
                this.dialog.show = true;
                this.dialog.option = "add";
            },

            //响应修改按钮
            onEdit: function (index) {
                //进行数据回填---通过选中的index获得tableData里面的数据
                this.mymodel = {
                    id:this.tableData[index].id,
                    title:this.tableData[index].title,
                    content:this.tableData[index].content,
                    desc:this.tableData[index].desc
                };

                //保存被选中的行 索引值
                this.selectItemIndex = index;

                //设置对话框可见
                this.dialog.title = '修改通知信息';
                this.dialog.show = true;
                this.dialog.option= "edit";

            },

            //响应删除按钮
            onDelete: function (index) {
                //删除被选中的数据
                this.$confirm('确认删除该数据吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 删除
                    let id = this.tableData[index].id;
                    axios.delete("/noticeList/" + id).then(res => {
                        if (res.data == 200) {
                            this.$message("删除成功");
                            // 删除table起始下标为1，长度为1的一个值
                            this.tableData.splice(index, 1);
                        }
                    });
                }).catch(() => {

                });

            },
            //保存按钮的抉择
            onSubmitAdd: function(){

                if (this.dialog.option == 'add'){
                    axios.post('/noticeList/',this.mymodel).then(res=>{
                        if (res.status == '200'){
                            //更新列表
                            this.tableData.push(res.data);
                            this.initTable();
                        }else{
                            console.log("post error")
                        }
                    });
                    this.mymodel = {
                        id : '',
                        title : '',
                        desc : '',
                        content : ''
                    },
                    this.dialog = {
                        show : false,
                        title : '',
                        option : ''
                    }
                }
                if (this.dialog.option == 'edit'){
                    axios.put('/noticeList/',this.mymodel).then(res=>{
                        if (res.status == '200'){
                            //更新列表
                            this.tableData.splice(this.selectedIndex,1,res.data);
                            this.initTable();
                        }else {
                            console.log("put error")
                        }
                    })
                    this.mymodel = {
                        id : '',
                        title : '',
                        desc : '',
                        content : ''
                    }
                    this.dialog = {
                        show : false,
                        title : '',
                        option : ''
                    }
                    this.selectedIndex = -1
                }
            }
        }
    });

</script>
</body>
</html>